<template>
    <div :class="`bag-item ${mode}`">
        <div class="goods-img">
            <img class="img-value" :src="imageSrc" alt="">
        </div>
        <div class="goods-detail">
            <div>
                <div class="goods-name title-color">{{itemInfo.prod_name}}</div>
                <div class="goods-sku" v-if="itemInfo.sku_name" @click="changeSku">{{itemInfo.sku_name}}</div>
                <!-- <div class="goods-sku" @click="changeSku">{{itemInfo.sku_name}}<MiniIcon name="down" size="10" :mode="mode" theme="#7D7D83" :styleMode="styleMode" /></div> -->
            </div>
            <div class="goods-price-and-count">
                <div class="goods-price title-color">
                    <span class="label">￥</span>{{itemInfo.price / 100}}
                </div>
                <CountControl :count="itemInfo.quantity" size="mini" :max="itemInfo.maxQuantity" :isDisable="isDisable" @minus="minusCount" @add="addCount" :mode="mode" :theme="theme" :styleMode="styleMode" />
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import { MiniIcon } from '@components/base';
import { CountControl } from '@components/shop';
import { getShopGoodsPrice } from '@biztools/shop';
import { createShopImageSrc } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    name: 'BagItem', // 购物袋条目
    mixins: [ModeMixin],
    components: {
        MiniIcon,
        CountControl,
    },
    props: {
        itemInfo: {
            type: Object,
            default() {
                return {};
            },
        },
        isDisable: {
            type: Boolean,
            default: false,
        },
        storeIndex: Number,
    },
    computed: {
        itemPrice() {
            const { itemInfo } = this.$props;
            return getShopGoodsPrice(itemInfo);
        },
        imageSrc() {
            const { itemInfo } = this.$props;
            return createShopImageSrc(itemInfo.pic);
        },
    },
    methods: {
        // 暂不支持
        changeSku() {
            // 修改规格
        },
        // 减少数量
        minusCount() {
            const { itemInfo } = this.$props;
            this.$emit('minus', itemInfo);
        },
        // 增加数量
        addCount() {
            const { itemInfo } = this.$props;
            this.$emit('add', itemInfo);
        },
    },
};
</script>

<style lang="less">
.bag-item {
    .flex();
    width: 100%;
    flex: 1;
    .goods-img {
        width: 102px;
        height: 102px;
        background-color: @product-bg-color;
        border-radius: @border-radius;
        overflow: hidden;
        .img-value {
            border-radius: @border-radius;
            widows: 100%;
            height: 100%;
        }
    }
    .goods-detail {
        flex: 1;
        .flex-column();
        justify-content: space-between;
        .m-l(@shop-bag-gap);
    }
    .goods-name {
        font-size: @font-size;
        line-height: 18px;
        color: @text-color;
    }
    .goods-sku {
        border-radius: 22px;
        height: 22px;
        display: inline-block;
        line-height: 22px;
        .p-h(@shop-gap);
        font-size: @shop-font-size-sm;
        color: @tip-color;
        .t-c();
        background-color: rgba(125,125,131,0.08);
        .m-t(@gap-sm);
    }
    .goods-price-and-count {
        .flex();
        justify-content: space-between;
        align-items: center;
    }
    .goods-price {
        .flex();
        align-items: baseline;
        text-indent: -3px;
        font-size: @font-size-md;
        font-weight: 500;
        font-family: @font-family-number;
        .label {
            .m-r(-3);
        }
    }
}
</style>
